////////////////////////////////////////////////////////////////////////////
//
// Copyright 2018 Realm Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////

@import "~realm-studio-styles/variables";

$history-panel-icon-size: 20px;

.Greeting {
  display: flex;
  flex-direction: row;
  height: 100%;

  &__ActionsPanel,
  &__HistoryPanel {
    padding: $spacer / 2;
  }

  &__ActionsPanel {
    align-items: center;
    background: $window-background;
    display: flex;
    flex-basis: 60%;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: space-around;
  }

  &__Brand {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  &__Title {
    margin-top: $spacer;
  }

  &__UpdateStatusIndicator {
    cursor: pointer;
    font-size: .8rem;
    width: 80%;

    &--busy {
      cursor: wait;
    }

    &__Status {
      margin: 0;
      padding: $spacer / 4;
      text-align: center;
    }

    &__Icon {
      margin-right: $spacer / 2;
    }

    &__Progress {
      height: .33rem;
    }

    &__Rail {
      height: 100%;
    }

    &__Bar {
      // The .25s matches the delay constant in updater.ts
      transition: width .25s linear;
    }
  }

  &__Actions {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  &__SecondaryActions {
    display: flex;

    & > * {
      margin: 0 ($spacer / 4);
    }
  }

  &__Action {
    flex-basis: 2.5 * $spacer;
    margin-bottom: $spacer * .75;
  }

  &__DownloadDemo {
    font-size: .7rem;
    margin-top: $spacer / 2;
  }

  &__MarketingPanel {
    flex-grow: 1;
  }

  &__HistoryPanel {
    background: $charcoal;
    color: $dove;
    flex-grow: 1;
    font-size: .9rem;

    a {
      color: $dove;
    }

    &__Entry {
      align-items: center;
      display: flex;
    }

    &__Icon {
      height: $history-panel-icon-size;
      margin: $spacer / 2;
      width: $history-panel-icon-size;
    }

    &__Description {
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 20px;
    }

    &__Empty {
      align-items: center;
      cursor: default;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      padding: $spacer / 2;
      text-align: center;
      user-select: none;

      a {
        text-decoration: underline;
      }
    }
  }

  &__Logo {
    width: 90px;
  }

  &__CloudOverlay {
    background: $overlay-background;
    bottom: 0;
    color: $dove;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: $spacer;
    position: absolute;
    right: 0;
    top: 0;

    &__Title {
      margin-top: $spacer;
      text-align: center;
    }

    &__ShareButtons {
      display: flex;
      justify-content: center;

      & > * {
        margin: $spacer / 4;
      }
    }

    &__Feedback {
      flex-grow: 1;
      margin: ($spacer / 2) 0;
      resize: none;
    }

    &__Footer {
      text-align: center;

      & > * {
        margin: 0 $spacer / 4;
      }
    }
  }
}
